<template>
    <div @click="drow" id="myDiv" ref="container" style="display: flex; flex-wrap: wrap; min-height: 200px; background-color: #f0f0f0; gap: 1rem;flex-grow: 1;">
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
      <div style="width: 100px; overflow: hidden; user-select: none;  height: 100px; background-color: red; "></div>
        <!-- 企鹅千千万大萨达啊实打实大师    测试合并撤回2222 -->
    </div>
  </template>
  
  <script>
 export default {
  data() {
    return {
    };
  },
  created(){
    
    // const rect = boxRef.value.getBoundingClientRect();
    // 输出鼠标在盒子位置信息，如top, right, bottom, left, width, height

  },
  mounted() {
  

    console.log( document.body.clientHeight,window.innerHeight);
    var divHeight = document.getElementById("myDiv")
    console.log( divHeight.offsetWidth);
    let divvv= this.$refs.container
    console.log(divvv.style,'divvv.style.width');
  },
  methods: {
    // @dragstart="handleDrag"
    // @drag.prevent="handleDragEnd"
    // @dragover.prevent="handleDragEnd"
    // handleDrag(event){
    //   const rect = this.$refs.Refbox.getBoundingClientRect();
    //   this.clX = event.clientX-rect.left;
    //   this.clY = event.screenY-rect.top;
    // },
    
    // handleDragEnd(event){
    // const widthS= (document.body.clientWidth)  //获取页面盒子内容宽度
    // const heightS= (document.body.clientHeight)  //获取页面盒子内容高度
    //console.log( document.body.clientHeight,window.innerHeight);获取页面可视高度
    //   const widthS= (document.body.clientWidth)
    //   const heightS= (document.body.clientHeight)
    //   let XX= (widthS-124)-(event.clientX-this.clX )
    //   let YY= (heightS-40)-(event.screenY-this.clY)
    //   if(event.screenY-this.clY>80 && event.clientX-this.clX >-2 &&XX>0&&YY>1){
    //   this.$refs.Refbox.style.position = "fixed";
    //   this.$refs.Refbox.style.left = (event.clientX-this.clX )+ "px";
    //   this.$refs.Refbox.style.top = (event.screenY-this.clY )+ "px";
    //   },
   
    drow() {
      this.$router.push({ name: "aaa", params: { id: "weixing" } });
    },
  },
};
</script>

  